<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .my-btn{
            display: inline-block;
            padding: 2px 12px;
            line-height: 2;
            background-color: #409EFF;
            color: white;
            cursor: pointer;
            user-select: none;
            border-radius: 6px;
            box-sizing: 0 0 4px #3283d5;
            margin: 2px;
        }
        .my-btn:active{
            background-color: #3283d5;
        }
        .model-box{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .model-content{
            background-color: white;
            display: inline-block;
            width: 400px;
            min-height: 300px;
            box-shadow: 0 0 8px #333;
            border-radius: 6px;
            position: absolute;
            left: 50%;
            top: 10%;
            transform: translate(-50%,0);
            padding: 10px;
        }
        .model-header{
            line-height: 1.8;
            border-bottom:1px solid #999;
            background-color: #dedede;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            分发:组件标签使用时，在组件正反标签中添加的额外标签或内容，可以在组件模板中对应的位置被渲染和显示
        -->
        <input type="button" value="添加">
        <my-btn name="添加"></my-btn>
        <my-btn name="删除"></my-btn>
        <my-btn name="修改"></my-btn>
        <my-btn name="详情"></my-btn>
        <br><br>
        <!-- 
            页面结构基本传递-基本分发 
                1. 默认分发:通过vue提供的内置组件 <slot> ，在子组件标签的指定位置进行占位性质的描述
                            当该组件被以标签形式在页面使用时，填写在组件标签正反内容中的值会渲染到 slot 位置
        -->
        <button type="button">添加</button>
        <button type="button">
            <img src="../../assets/img/loading.gif" alt="" srcset="">
        </button>
        <my-button>
            <img src="../../assets/img/loading.gif" alt="" srcset="">
        </my-button>
        <my-button>添加</my-button>
        <my-button>删除</my-button>
        <my-button>修改</my-button>
        <my-button>详情</my-button>
        <hr>
        <!--  
            2. 具名分发:通过vue提供的具有名称的内置组件 <slot name="自定义名称"> ，在子组件标签的指定位置进行占位性质的描述
                        当该组件被以标签形式在页面使用时，填写在组件标签正反内容中的，具有<template v-slot:名称> 描述的内容值会渲染到 具名 slot 位置
        -->
        <input type="button" value="添加" @click="addModel=true">
        <my-model v-model="addModel">
            <!-- 
                组件标签的正反内容中，以template标签包裹分发内容，通过指令 v-slot:插槽名 进行传递的位置选择
            -->
            <template v-slot:header>
                <div>添加</div>
            </template>
            <div>
                <label for="username">登录名：</label>
                <input type="text">
            </div>
            <div>
                <label for="username">密码：</label>
                <input type="text">
            </div>
        </my-model>

        <input type="button" value="列表展示" @click="listModel=true">
        <my-model v-model="listModel">
            <template v-slot:header>
                <div>详细列表</div>
            </template>
            <!-- 默认分发其实也是一种特殊的具名分发，因为默认分发的插槽 slot 的name属性取值就是 default -->
            <template v-slot:default>
                <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                </ul>
            </template>
        </my-model>
        
    </div>

    <script type="text/x-template" id="myBtn">
        <div class="my-btn">{{ name }}</div>
    </script>
    <script type="text/x-template" id="myButton">
        <div class="my-btn">
            <slot></slot>
        </div>
    </script>
    <script type="text/x-template" id="model">
        <teleport to="body">
            <div class="model-box" v-show="modelValue" @click=" $emit('update:modelValue',false) ">
                <div class="model-content" @click.stop>
                    <div class="model-header">
                        <!-- 具有名字的内容分发插槽 -->
                        <slot name="header"></slot>
                    </div>
                    <div class="model-body">
                        <!-- slot 标签中定义的内容或者标签或者组件，在使用未接收到任何结果时会进行显示 -->
                        <!-- <slot name="default">默认内容值</slot> -->
                        <slot>默认内容值</slot>
                    </div>
                </div>
            </div>
        </teleport>
    </script>

    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    addModel:false,
                    listModel:false
                }
            }
        });
        
        app.component("MyBtn",{
            template:"#myBtn",
            props:{
                name:{
                    type:String,
                    default:"按钮"
                }
            }
        })
        app.component("MyButton",{
            template:"#myButton"
        })
        app.component("MyModel",{
            template:"#model",
            emits:["update:modelValue"],
            props:{
                modelValue:{
                    type:Boolean,
                    default:false
                }
            }
        })
        
        app.mount("#app")
    </script>
</body>
</html>